<template>
  <div class="gray-page record-page inspect-record-page">
    <nav-bar title="人员预警"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-search
        readonly
        background="#f6f6f6"
        v-model="searchOptionStr"
        placeholder="多条件搜索"
        :left-icon="searchLeftIcon"
        clearable
        @click="filterPopupShow = true"
      />
      <template v-if="moreList.length">
        <div
          v-for="(item, index) in moreList"
          :key="index"
          class="list-box"
          style="margin-bottom: 15px"
          @click="detail(item)"
        >
          <div style="font-size: 16px; font-weight: 500; line-height: 18px; padding: 16px">
            {{ item.regionAddress + '区域发现外来人员' }}
          </div>
          <div style="display: flex; padding: 0px 16px 20px 16px; justify-content: space-between">
            <p>{{ item.locationDescription }}</p>
            <p>{{ item.addTime }}</p>
          </div>
        </div>
      </template>
      <template v-if="!moreList.length">
        <van-empty
          :image="require('@/assets/images/basic/pic_no_content.png')"
          description="暂无内容~"
          style="height: 300px"
        />
      </template>
    </div>
    <van-popup
      v-model="filterPopupShow"
      round
      position="right"
      style="height: 100%; width: 80%"
      class="inspect-record-popup"
    >
      <van-cell
        size="large"
        title="搜索条件"
        value="清空"
        value-class="van-cell__value_blue"
        is-link
        border
        :clickable="false"
      >
        <template #right-icon>
          <div class="van-cell__right-icon" @click="onClear">
            <img
              src="@/assets/images/inspectVisit/inspect/icon_popup_clear@2x.png"
              width="16px"
              height="16px"
              style="vertical-align: middle"
              alt=""
            />
          </div>
        </template>
      </van-cell>
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12" v-for="(item, key) in gridData" :key="key">
            <div
              class="inspect-record-tag"
              :class="{ active: searchForm.gridCode === item.gridCode }"
              @click="handleGridChange(item)"
            >
              {{ item.gridName }}
            </div>
          </van-col>
        </van-row>
      </div>
      <van-cell title="预警场所" :border="false" />
      <div class="inspect-record-tag--group">
        <van-field v-model="searchForm.placeName" placeholder="请输入预警场所" label="" />
      </div>
      <van-cell title="发生时间" :border="false" />
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12">
            <div
              class="inspect-record-tag inspect-record-tag__placeholder"
              align="center"
              @click="datePopupShow = true"
            >
              {{ searchForm.dateRange[0] || '开始时间' }}
            </div>
          </van-col>
          <van-col :span="12">
            <div
              class="inspect-record-tag inspect-record-tag__placeholder"
              align="center"
              @click="datePopupShow = true"
            >
              {{ searchForm.dateRange[1] || '结束时间' }}
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="inspect-record-popup--button">
        <van-row :gutter="40">
          <van-col span="12">
            <van-button block @click="onClear">清空</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" @click="onFilter">确定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-popup v-model="datePopupShow" round position="bottom">
      <date-range-picker v-model="searchForm.dateRange" @change="handleDateRangeChange"></date-range-picker>
    </van-popup>
  </div>
</template>
<script>
import Public from '@/api/public'
import InspectVisit from '@/api/inspectVisit'
import { mapState } from 'vuex'
class SearchForm {
  constructor() {
    this.inoutTimeBegin = ''
    this.inoutTimeEnd = ''
    this.placeName = ''
    this.recordSize = ''
    this.pageSize = ''
    this.regionCode = ''
    this.dateRange = []
  }
}
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      filterPopupShow: false,
      datePopupShow: false,
      searchForm: new SearchForm(),
      searchOptionStr: '',
      gridData: [],
      pointData: [],
      companyTypeData: [],
      inspectionResultData: [],
      moreList: []
    }
  },
  created() {
    this.searchForm.regionCode = this.user.regionCode
    this.searchForm.pageSize = 50
    this.searchForm.recordSize = 0
    this.getMoreList()
  },
  watch: {
    'searchForm.gridCode'() {
      this.getPoint()
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo,
      isTimeOut: state => state.timeOut,
      isHttpErro: state => state.httpErro
    })
  },
  methods: {
    // 巡查记录
    getMoreList() {
      this.moreList = []
      InspectVisit.Grid.getList(this.searchForm).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.moreList = data.list
        }
      })
    },
    // 获取网格
    async getGrid() {
      await InspectVisit.Init.grid().then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.gridData = data
        }
      })
    },
    // 获取巡查点
    getPoint() {
      this.pointData = []
      if (!this.searchForm.gridCode) return false
      InspectVisit.Init.company({
        gridCode: this.searchForm.gridCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.pointData = data
        }
      })
    },
    // 获取单位类型、安全隐患字典项
    getDict() {
      Public.Init.init({ type: 'companyType,inspectionResultCompany' }).then(res => {
        const { data } = res.data
        this.companyTypeData = data.companyType
        this.inspectionResultData = data.inspectionResultCompany
      })
    },
    // 选择网格
    handleGridChange(item) {
      if (this.searchForm.gridCode === item.gridCode) {
        this.searchForm.gridCode = ''
        this.searchForm.gridName = ''
      } else {
        this.searchForm.gridCode = item.gridCode
        this.searchForm.gridName = item.gridName
      }
    },
    // 选择重点单位
    handleCompanyChange(item) {
      if (this.searchForm.companyCode === item.companyCode) {
        this.searchForm.companyCode = ''
        this.searchForm.companyName = ''
      } else {
        this.searchForm.companyCode = item.companyCode
        this.searchForm.companyName = item.companyName
      }
    },
    // 选择重点单位类型给
    handleCompanyTypeChange(item) {
      if (this.searchForm.companyType === item.code) {
        this.searchForm.companyType = ''
        this.searchForm.companyTypeName = ''
      } else {
        this.searchForm.companyType = item.code
        this.searchForm.companyTypeName = item.description
      }
    },
    // 选择安全隐患
    handleResultChange(item) {
      if (this.searchForm.inspectionResult === item.code) {
        this.searchForm.inspectionResult = ''
        this.searchForm.inspectionResultName = ''
      } else {
        this.searchForm.inspectionResult = item.code
        this.searchForm.inspectionResultName = item.description
      }
    },
    // 选择时间范围
    handleDateRangeChange() {
      this.searchForm.inoutTimeBegin = new Date(this.searchForm.dateRange[0]).valueOf()
      this.searchForm.inoutTimeEnd = new Date(this.searchForm.dateRange[1]).valueOf()
      this.datePopupShow = false
    },
    // 筛选
    onFilter() {
      this.searchOptionStr = ''
      this.filterPopupShow = false
      this.getMoreList()
    },
    // 清空
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空筛选条件',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.searchForm = new SearchForm()
        })
    },
    detail(row) {
      this.$router.push({
        path: '/inspectvisit/inspect/company/warningDetail',
        query: {
          row
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/record.less';
@import '~@/assets/style/inspectVisit/inspect/record.less';
@import '~@/assets/style/table.less';
.list-box {
  width: 92%;
  margin: 0 4%;
  background: #fff;
}
</style>
